// redux-toolkit
import { useSelector, useDispatch } from "react-redux"

import { increment, decrement, addToNum } from "./store/modules/counterStore"
import { fetchChannelList } from "./store/modules/channelStore"
import { useEffect } from "react"

function App() {
  const { count } = useSelector((state) => state.counter)
  const { channelList } = useSelector((state) => state.channel)

  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(fetchChannelList())
  }, [dispatch])
  return (
    <>
      <div>
        <button onClick={() => dispatch(decrement())}>-</button>
        {count}
        <button onClick={() => dispatch(increment())}>+</button>
        <button onClick={() => dispatch(addToNum(10))}>add to 10</button>
        <button onClick={() => dispatch(addToNum(20))}>add to 20</button>
      </div>
      <div>
        {channelList.map((item) => (
          <div key={item.id}>{item.name}</div>
        ))}
      </div>
    </>
  )
}
export default App
